<template>
  <div class="up-div">
    <div class="img-box" v-for="(img, index) in addform.fileList" :key="index">
      <div class="img-inner">
        <PublicImage
          :src="img"
          class="banner"
        ></PublicImage>
        <!-- <img :src="img" class="banner" /> -->
      </div>
      <span class="close-btn" @click.stop="delfiledata(index)"></span>
    </div>
    <div class="videoBox" v-if="upload.isUploading">
      <div v-loading="true" class="loadBox"></div>
    </div>
    <el-upload
      :class="
        addform.fileList.length > 1
          ? 'avatar-uploader flex-col'
          : 'avatar-uploader'
      "
      multiple
      :on-progress="handleFileUploadProgress"
      :headers="upload.headers"
      :action="upload.url"
      :show-file-list="false"
      :on-error="handleError"
      :on-success="handleFileSuccess"
      :before-upload="beforecheckfile"
      :limit="limit"
      name="file"
      accept=".jpg,.png"
      v-if="addform.fileList.length < this.limit && !upload.isUploading"
    >
      <div class="banner-uploader-icon">
        <i class="el-icon-upload icon-img"></i>
        <div class="el-upload__text">{{name}}</div>
      </div>
      <div slot="tip" class="el-upload__tip" v-if="addform.fileList.length == 0">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/util.js'
import { host } from '@/utils/config.js'
import { request } from '@/utils/request.js'

export default {
  props: {
    tip: {
      type: String,
      default: '支持扩展名：.rar .zip .doc .docx .pdf,大小不超过50M',
    },
    limit: {
      type: Number,
      default: 9,
    },
    name: {
      type: String,
      default: '上传',
    },
  },
  data() {
    return {
      addform: {
        fileList: [], //附件资料
        file: [],
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: host + '/oss/upload',
      },
      addformrules: {},
      dialogVisible: false,
      dialogImageUrl: '',
    }
  },

  methods: {
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.open = true
      this.upload.isUploading = true
    },
    //上传附件前限制大小 格式
    beforecheckfile(file) {
      console.log('beforecheckfile')
      console.log(2679, file)
      this.upload.open = true
      this.upload.isUploading = true
      let isfile = true
      const isLt10M = file.size / 1024 / 1024 < 2
      if (!isfile) {
        this.$message.error('上传文件格式不正确')
      } else if (!isLt10M) {
        isfile = false
        this.$message.error('上传文件大小不能超过 2MB')
      }
      this.upload.open = false
      this.upload.isUploading = false
      return isfile
    },
    // 文件上传成功处理
    handleFileSuccess(response) {
      this.upload.open = false
      this.upload.isUploading = false
      if (response.code == 200) {
        this.addform.fileList.push(response.data.url)
        console.log(this.addform.fileList, 'this.addform.fileList上传成功')
        this.$emit('changeImgUp', response.data.url)
      } else {
        this.$alert(response.msg, '上传文件', {})
      }
    },
    handleError() {
      this.$message.error('上传失败')
      this.upload.isUploading = false
      this.upload.open = false
    },
    //删除文件
    async delfiledata(idx) {
      this.addform.fileList.splice(idx, 1)
      console.log(this.addform.fileList, 'ff')
      this.$emit('delImg', idx)
    },
  },
}
</script>

<style lang="scss" scoped>
.videoBox {
  // position: relative;
  display: inline-block;
  width: 100px;
  min-height: 100px;
  .loadBox {
    width: 100px;
    height: 100px;
    background-color: #f1f2f4;
  }
}
.img-box {
  position: relative;
  height: 100px;
  width: 100px;
  float: left;
  border-radius: 4px;
  margin-right: 14px;
  margin-bottom: 14px;
}
.img-inner {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #f5f5f5;
}
.img-inner .banner {
  width: 100px;
  border-radius: 4px;
}
.close-btn {
  position: absolute;
  right: -7px;
  top: -9px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url('../../../../assets/image/finance/close-img.png') no-repeat center;
}
.banner-uploader-icon {
  display: inline-block;
  font-size: 12px;
  color: #045db9;
  width: 100px;
  height: 100px;
  /* line-height: 100px; */
  text-align: center;
  border: 1px dashed #f1f2f4;
  background: #f1f2f4;
  border-radius: 2px;
  vertical-align: top;
}
.banner-uploader-icon .icon-img {
  font-size: 26px;
  margin-top: 20px;
}
.banner-uploader-icon .el-upload__text {
  line-height: 5px;
  font-size: 14px;
}
.el-upload__tip {
  margin-left: 10px;
  height: 20px;
  line-height: 20px;
}
</style>


<style lang="scss">
.up-div {
  display: flex;
  // justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .avatar-uploader {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    align-items: flex-end;
    margin-bottom: 14px;
    .el-upload {
      text-align: left;
    }
    &.flex-col {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}
</style>
